<template>
  <div class="emoji">
    <span
      :style="
        'background-image: url(https://gitee.com/lovestarboy/figurebed/raw/master/bilibili/tv/' +
        index +
        '.png);'
      "
      class="emoji-item"
      v-for="(item, index) in emojiTv"
      :key="index"
      @click="handleEmoji(index)"
    ></span>
  </div>
</template>

<script>
import { emojiList } from "@/libs/emoji.js";
export default {
  data() {
    return {
      emojiTv: [],
    };
  },
  mounted() {
    this.emojiTv = emojiList.emojiTv;
  },
  methods: {
    handleEmoji(index) {
      let msg = this.emojiTv[index];
      this.$emit("emojiClick", msg);
    },
  },
};
</script>
<style lang='scss' scoped>
.emoji {
  height: 140px;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  .emoji-item {
    cursor: pointer;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 10px 0 0;
    background-color: rgb(243, 239, 230, 0.1);
    background-size: cover;
  }
  .emoji-item:hover {
    background-color: rgb(240, 240, 240);
  }
}
</style>